<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
<link href="/tmx/JSP/css/bootstrap.min.css" rel="stylesheet" />
<link href="/tmx/JSP/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/tmx/JSP/css/templatemo_misc.css" />
<link type="text/css" rel="stylesheet" href="/tmx/JSP/css/easy-responsive-tabs.css" />
<link href="/tmx/JSP/css/templatemo_style.css" rel="stylesheet" /> 
        
<script src="/tmx/JSP/js/jquery-1.10.2.min.js"></script> 
<script src="/tmx/JSP/js/jquery.lightbox.js"></script>
<script src="/tmx/JSP/js/easyResponsiveTabs.js" type="text/javascript"></script><!-- 功能：点击左边标题，切换内容 -->  
<script type="text/javascript" src="/tmx/JSP/js/layer/layer.js" ></script>

<script>
    function showhide()
    {
        var div = document.getElementById("newpost");
		if (div.style.display !== "none") 
		{
			div.style.display = "none";
		}
		else 
		{
			div.style.display = "block";
		}
    }
  </script>
  
  <style>
  body{
	font-family:Microsoft YaHei;
  }
  
  h1{
	font-family:Microsoft YaHei;
  }
  
  .span1{
	color: #FF7F00;
	font-size: 12pt;
  }
  
  .span2{
	color: #FF0000;
	font-size: 12pt;
  }
  
  .span3{
	color: #6495ED;
	font-size: 12pt;
  }
  
  .block_position_left{
	float: left; 
  }
  
  .block_position_right{
	float: right; 
  }
  
  </style>
  
  </head>
  <body>
    	<!-- logo start -->
    <div class="logocontainer">
    	<div class="row">
        	<h1><a href="#">社区志愿者服务中心信息化平台软件</a></h1>
            <div class="clear"></div>
            <div class="templatemo_smalltitle"></div>
       </div>
    </div>
    <!-- logo end -->    
   <div id="menu-container" class="main_menu">
	
    <!-- start -->
   <div class="testimonial" id="menu-4">
    	<div class="container">
        	<div class="row templatemo_bordergapborder">
				<!--vertical Tabs-->
				<div id="cmt">
					<div class="col-md-3 col-sm-12 templatemo_leftgap_about">
					<ul id="titleList" class="resp-tabs-list templatemo_testitab" style="height: 433px;">
						<s:iterator value="noticeList" var="n" status="statu">
							<li>${n.title }</li>
						</s:iterator>
					</ul>
					<!-- <div class="templatemo_aboutlinkwrapper">
					<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="/tmx/JSP/index.jsp">返回</a></div>
				</div> -->
				</div>
				<div id="content" class="resp-tabs-container templatemo_testicontainer">
				<s:iterator value="noticeList" var="n" status="statu">
						<div>
		                	<div class="templatemo_col70 templatemo_rightgap_about" style="height: 100%;">
		                    	<div class="templatemo_graybg templatemo_botgap" style="height: 849px;width: 100%;">
		                         <div class="templatemo_frame" style="height: 789px;">
									<div class="block_position_left">
										${n.content }
									</div>	
		                         </div>
		                        </div>
		                    </div>
		                    <div class="templatemo_col30 templatemo_leftgap templatemo_botgap">
								<div style="display:none;">
									<input id="check" value="" type="hidden"/>
									<span id="start">${page.currPage}</span>
									<span id="pageCount">${page.pageCount}</span>
								</div>
								<div id="prev" class="yellow_block_large" onclick="prevPage()">
									上一页
								</div>
								<div style="height: 20px;">
								</div>
								<div id="next" class="red_block_large" onclick="nextPage()">
									下一页
								</div>
								<div class="grey_block_large" style="margin-top:406px;" onclick="goBack()">
									返回
								</div>
							</div>
		                </div>
				</s:iterator>
            	</div>
            	<%-- <div>
					<div style="height: 141px; width: 100%;">
						<div style="display:none;">
							<input id="check" value="" type="hidden"/>
							<span id="start">${page.currPage}</span>
							<span id="pageCount">${page.pageCount}</span>
						</div>
						<div class="yellow_block_large block_position_left" style="margin-left:8px;" onclick="prevPage()">
							上一页
						</div>
						<div class="red_block_large block_position_right" style="margin-right:8px;" onclick="nextPage()">
							下一页
						</div>
					</div>
				</div> --%>
				</div>
				<div class="col-sm-12 templatemo_leftgap templatemo_aboutlinkwrapper1">
				<div class="templatemo_aboutback templatemo_botgap">
					<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="#">返回</a></div>
				</div>
			</div>
			</div>
		</div>
	</div>
    <!-- end -->	
    
    </div>
    
    <!-- logo start -->
    <!-- <div class="logocontainer">
    	<div class="row">
            <div class="templatemo_footer"></div>
       </div>
    </div> -->
    <!-- logo end -->  
   <script type="text/javascript">
    $(document).ready(function () {
		$('#cmt').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
        });
		
		// 1000毫秒内回到距离顶部120px处
		$('ul').click(function() {
			$('html, body').stop().animate({
				scrollTop : 120
			}, 1000);
		});
		
		// 初始化上一页和下一页
		$('.yellow_block_large').each(function(){
			$(this).html('上一页<span style="font-size:14px">（没有了）</span>');
		});
		var pageCount = ${page.pageCount};
		if(pageCount <= 1){
			$('.red_block_large').each(function(){
				$(this).html('下一页<span style="font-size:14px">（没有了）</span>');
			});
		}
    });
    
    // 翻页按钮失效
    function btnDisable(id){
    	if(id == 'prev'){ // 上一页按钮
    		$('.yellow_block_large').each(function(){
    			$(this).html('上一页<span style="font-size:14px">（没有了）</span>');
    		});
    	}else if(id == 'next'){ //下一页按钮
    		$('.red_block_large').each(function(){
				$(this).html('下一页<span style="font-size:14px">（没有了）</span>');
			});
    	}
    }
    
 	// 翻页按钮恢复
    function btnEnable(id){
    	if(id == 'prev'){ // 上一页按钮
    		$('.yellow_block_large').each(function(){
    			$(this).html('上一页');
    		});
    	}else if(id == 'next'){ //下一页按钮
    		$('.red_block_large').each(function(){
				$(this).html('下一页');
			});
    	}
    }
    
    function prevPage(){
    	var start =parseInt($("#start").html());
    	if(start <= 1){
    		start = 1;
    		/* // 上一页按钮变灰
    		btnDisable('prev'); 
    		return;*/
    		return;
    	}else{
    		/* // 下一页按钮恢复
    		btnEnable('next'); */
    		start--;
    		if(start == 1){
        		// 上一页按钮失效
        		btnDisable('prev');
        	}
    		// 下一页按钮恢复
    		btnEnable('next');
    	}
    	
    	ajaxNotice(start);
    }

    function nextPage(){
    	var start =parseInt($("#start").html());
    	var count = parseInt($("#pageCount").html());
    	if(start >= count){
    		start = count;
    		/* // 下一页按钮变灰
    		btnDisable('next'); */
    		return;
    	}else{
    		/* // 上一页按钮恢复
    		btnEnable('prev'); */
    		start++;
    		if(start == count){
    			// 下一页按钮失效
        		btnDisable('next');
        	}
    		// 上一页按钮恢复
    		btnEnable('prev');
    	}
    	ajaxNotice(start);
    }
    
    function ajaxNotice(start){
    	var title = $.trim($('#check').val());
    	$.ajax({
    		url:'${pageContext.request.contextPath}/LatestNoticeAction!searchNoticeList.action',
    		data:{
    			"page.currPage":start,
    			"notice.title":title
    		},
    		type:'post',
    		dataType:'json',
    		success:function(data){
    			if(data.map.length>0){
    				$.each(data.map,function(i){
    					// title
    					$('#titleList li:eq('+i+')').html(data.map[i].title);
    					// content
    					$("#content .block_position_left").eq(i).html(data.map[i].content);
    				});
    			}
    			$("#start").html(data.object.currPage);
    			$("#pageCount").html(data.object.pageCount);
    		}
    	});
    }
    
    function goBack(){
    	location.href = "/tmx/JSP/index.jsp";
    }
</script>

  </body>
</html>